<template>
        <el-dialog title="业务"
         :visible.sync="BusinessDialogVisible"
         @open='sendAjax'
         :lock-scroll='false'
         top='5vh'
         >
            <div class="table" ref='business'>
                <ul>
                    <li>
                        <div>
                            <label 
                                class='label' 
                                @click='choseAll'
                            >
                            </label>
                        </div>
                        <div>单位名称</div>
                        <div>人事信息</div>
                        <div>薪酬信息</div>
                    </li>
                   <li v-for='(k,i) in res'>
                        <div>
                          <label 
                            class='label' 
                            @click='changeFirstLabel(i)'
                            >
                          </label>
                        </div>
                        <div>
                          <span>{{k.descrshort}}</span>
                        </div>
                        <div>
                            <label 
                                class='label' 
                                @click='changeClass'
                                :data-personnel='k.personnel'
                                :data-index = 'i+1'
                                >
                            </label>
                            </div>
                        <div>
                            <label 
                                class="label" 
                                @click='changeClass'
                                :data-pay='k.pay'
                                :data-index = 'i+1'
                              >
                            </label>
                        </div>
                   </li>
               
                   
                </ul>                  
            </div> 
             <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save">保 存</el-button>
                <el-button @click="changeVisible">取 消</el-button>
             </span>
    
        </el-dialog>
</template>

<script>
import Vue from "vue";
import {
  Checkbox,
  CheckboxGroup,
  Button,
  Dialog,
  Notification
} from "element-ui";
import URL from "@/common/js/adminUrl";

Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Button);
Vue.use(Dialog);
export default {
  created () {
    Bus.$on("业务单位授权", data => (this.BusinessDialogVisible = data.business));
    Bus.$on("userId", data => (this.userId = data));
    this.sendAjax();
  },

  data () {
    return {
      BusinessDialogVisible: false,
      res: "",
      userId: "",
      allChose: "",
      saveFlag: false
    };
  },
  methods: {
    sendAjax () {
      this.Axios
        .Post(URL.businessAuth.url + "?userId=" + this.userId, {})
        .then(res => {
          let datas = res.data.datas;
          this.res = datas.allBusiness;

          for (let i = 0; i < this.res.length; i++) {
            this.res[i].pay = false;
            this.res[i].personnel = false;
          }
        
          if (datas.CheckBusiness) {

            for (let i = 0; i < datas.CheckBusiness.length; i++) {
              if (datas.CheckBusiness[i].pay) {

                for (let k = 0; k < this.res.length; k++) {
                  if (this.res[k].setid == datas.CheckBusiness[i].business_id) {
                    this.res[k].pay = datas.CheckBusiness[i].pay;
                  }
                }
                
              }

              if (datas.CheckBusiness[i].personnel) {

                 for (let k = 0; k < this.res.length; k++) {
                  if (this.res[k].setid == datas.CheckBusiness[i].business_id) {
                    this.res[k].personnel = datas.CheckBusiness[i].personnel;
                  }
                }

              }
              
            }

          
          }

          if (this.$refs.business) {
            //先获取所有label,并把去除它们的选中效果
            let allLabel = this.$refs.business.querySelectorAll("label");

            for (let i = 0; i < allLabel.length; i++) {
              allLabel[i].classList.remove("selected");
            }
           

            // 获取所有li
            let lis = this.$refs.business.children[0].children;

            for (let i = 0; i < this.res.length; i++) {
              if (this.res[i].pay) {
                lis[i + 1].children[3].children[0].classList.add("selected");
              }

              if (this.res[i].personnel) {
                lis[i + 1].children[2].children[0].classList.add("selected");
              }
            }
            this.handleChangeAll();
          }
        });
    },

    choseAll (event) {
      let e = event ? event : window.event

      let target = e.target || e.srcElement

      var allLabel = this.$refs.business.querySelectorAll("label");
      let selected = target.classList.length == 2 ? true : false;

      if (selected) {
        for (let i = 0; i < allLabel.length; i++) {
         allLabel[i].classList.remove("selected")
        }
       
      } else {
        for (let i = 0; i < allLabel.length; i++) {
         allLabel[i].classList.add("selected")
        }
      }

      this.saveFlag = true;
    },

    changeClass (event) {
      let e = event ? event : window.event

      let target = e.target || e.srcElement

      let index = target.getAttribute('data-index') 

      let labelList = this.$refs.business.children[0].children[
        index
      ].querySelectorAll("label");

      // 点击后改变当前class
      if (target.className == "label selected") {
        target.className = "label";
        labelList[0].className = "label";
      } else {
        target.className = "label selected";
      }

      // 根据当前选择   决定第一个label是否选中
      if (labelList[1].className == labelList[2].className) {
        labelList[0].className =
          labelList[1].className == "label" ? "label" : "label selected";
      }
      this.saveFlag = true;
      this.handleChangeAll();
    },

    changeFirstLabel (i) {
      let labelList = this.$refs.business.children[0].children[
        i + 1
      ].querySelectorAll("label");


      labelList[0].className =
        labelList[0].className == "label selected" ? "label" : "label selected";

      let styles =
        labelList[0].className == "label selected" ? "label selected" : "label";

      for (let i = 1; i < labelList.length; i++) {
        labelList[i].className = styles;
      }
      this.saveFlag = true;
      this.handleChangeAll();
    },

    handleChangeAll () {
      if (this.$refs.business) {
        let flag = true;
        let list = this.$refs.business.children[0].children;

        for (let i = 1; i < list.length; i++) {
          if (
            list[i].children[2].children[0].className == "label" &&
            list[i].children[3].children[0].className == "label"
          ) {
            list[i].querySelectorAll("label")[0].className = "label";
          } else if (
            list[i].children[2].children[0].className == "label selected" &&
            list[i].children[3].children[0].className == "label selected"
          ) {
            list[i].querySelectorAll("label")[0].className = "label selected";
          }
        }

        for (let q = 1; q < list.length; q++) {
          if (list[q].querySelectorAll("label")[0].className == "label") {
            flag = false;
          }
        }

        if (flag) {
          this.$refs.business.querySelectorAll("label")[0].className =
            "label selected";
        } else {
          this.$refs.business.querySelectorAll("label")[0].className = "label";
        }
      }
    },
    save () {
      if (this.saveFlag && this.$refs.business) {
        // 搜索所有选项状态后发送
        let list = this.$refs.business.children[0].children;
        let payArr = [];

        let personnelArr = [];

        for (let i = 1; i < list.length; i++) {
          if (list[i].children[2].children[0].className == "label selected") {
            personnelArr.push(1);
          } else {
            personnelArr.push(0);
          }
          if (list[i].children[3].children[0].className == "label selected") {
            payArr.push(1);
          } else {
            payArr.push(0);
          }
        }

        let params = {
          userId: this.userId,
          userBusiness: []
        };

        for (let i = 0; i < this.res.length; i++) {
          if (personnelArr[i] == 1 || payArr[i] == 1) {
            params.userBusiness.push({
              userId: this.userId,
              businessId: this.res[i].setid,
              personnel: personnelArr[i] + "",
              pay: payArr[i] + ""
            })
          }
        }


        this.Axios.Post(URL.saveBusinessAuth.url, params).then(res => {
          if (res.data.message && res.data.message == "保存成功") {
            Notification({
              title: "保存成功",
              type: "success",
              offset: "1"
            });
          } else {
            Notification({
              title: "保存失败",
              type: "error",
              offset: "1"
            });
          }
        });
      }
      this.changeVisible();
    },

    changeVisible () {
      this.saveFlag = false;
      this.BusinessDialogVisible = false;
    }
  }
};
</script>

<style scoped>
.table li {
  display: flex;
}

.table li:first-of-type {
  background-color: #f5f5f6;
}

.table li div {
  padding: 12px 0 12px 12px;

  flex: 2;
}

.table li div:first-of-type {
  flex: 1;
}

.label {
  display: inline-block;
  position: relative;
  border: 1px solid #bfcbd9;
  border-radius: 4px;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  background-color: #fff;
  z-index: 1;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}

.selected {
  background-color: #20a0ff;
  border-color: #0190fe;
  position: relative;
}

.selected::after {
  content: '\2714';
  color: #fff;
  position: absolute;
  left: 3px;
  top: -2px;
}
</style>